<section>
  <div class="flex gap-6">
    <div class="flex flex-col flex-grow gap-2">
      <h3>Single</h3>

      <% default_params = { label: "Country", name: "country", choices: %w[Denmark Sweden] } %>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Default</h6>
        <%= render current_component.new(id: "single-default", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Selected</h6>
        <%= render current_component.new(id: "single-selected", value: "Sweden", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Error</h6>
        <%= render current_component.new(id: "single-error", value: "Sweden", error: "The value is wrong!", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Disabled</h6>
        <%= render current_component.new(id: "single-disabled", disabled: true, placeholder: "Select country", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Disabled filled</h6>
        <%= render current_component.new(id: "single-disabled-filled", value: "Sweden", disabled: true, **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Remote options</h6>
        <%= render current_component.new(id: "single-src-empty", choices: [], src: solidus_admin.country_states_url(country_id: 1), label: "State", name: "state") %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Remote options (preselected)</h6>
        <%= render current_component.new(
          id: "single-src-selected",
          choices: Spree::State.where(id: 1).map { [_1.name, _1.id] },
          src: solidus_admin.country_states_url(country_id: 1),
          label: "State",
          name: "state",
          value: "1"
        ) %>
      </div>
    </div>

    <div class="flex flex-col flex-grow gap-2">
      <h3>Multiple</h3>

      <% default_params = { label: "Countries", name: "countries", choices: ["Denmark", "Sweden", "United Kingdom"], multiple: true } %>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Default</h6>
        <%= render current_component.new(id: "multiple-default", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Selected</h6>
        <%= render current_component.new(id: "multiple-selected", value: %w[Sweden Denmark], **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Error</h6>
        <%= render current_component.new(id: "multiple-error", value: "Sweden", error: "The value is wrong!", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Disabled</h6>
        <%= render current_component.new(id: "multiple-disabled", disabled: true, placeholder: "Select country", **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Disabled filled</h6>
        <%= render current_component.new(id: "multiple-disabled-filled", value: "Sweden", disabled: true, **default_params) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Remote options</h6>
        <%= render current_component.new(id: "multiple-src-empty", choices: [], src: solidus_admin.country_states_url(country_id: 1), label: "State", name: "state", multiple: true) %>
      </div>

      <div class="mb-8">
        <h6 class="text-gray-500 mb-3 mt-0">Remote options (preselected)</h6>
        <%= render current_component.new(
          id: "multiple-src-selected",
          choices: Spree::State.where(id: [1,2,3]).map { [_1.name, _1.id] },
          src: solidus_admin.country_states_url(country_id: 1),
          label: "State",
          name: "state",
          multiple: true,
          value: [1,2,3]
        ) %>
      </div>
    </div>
  </div>
</section>
